<template>
  <div>
    <h3>商品清单如下:</h3>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item.shopName }} {{ item.price }}元/份</li>
    </ul>
    <h3>请选择要购买的数量:</h3>
    <Snacks v-for="(item, index) in list" :key="index" :obj="item" @changeNum="item.count = $event"></Snacks>
    <h3>总价为:{{ total }}</h3>
  </div>
</template>

<script>
import Snacks from '@/components/Snacks'
export default {
  data() {
    return {
      list: [
        {
          shopName: '可比克',
          price: 5.5,
          count: 0
        },
        {
          shopName: '草莓酱',
          price: 3.5,
          count: 0
        },
        {
          shopName: '红烧肉',
          price: 55,
          count: 0
        },
        {
          shopName: '方便面',
          price: 12,
          count: 0
        }
      ]
    }
  },
  methods: {},
  components: { Snacks },
  computed: {
    total() {
      return this.list.reduce((prev, item) => prev + item.count * item.price, 0)
    }
  },
  watch: {},
  created() {},
  props: {}
}
</script>

<style scoped>
li {
  list-style: none;
}
</style>